<template>
	<view>
		<view class="flex goods" @click="goodsInfo" :data-id="info.id">
			<view>
				<u--image :src="info.image" width="670rpx"></u--image>
			</view>
			<view class="flex goodsInfo">
				<view class="title">{{info.title}}</view>
				<view class="subtitle">{{info.subtitle}}</view>
				<view class="flex flexRow goodsPrice">
					<view class="flex flexRow">
						<view class="zn">￥</view>
						<view class="zero">{{info.vipprice ? info.vipprice : 0.00}}</view>
						<view class="vipLogo">会员价</view>
						<view class="salePrice">￥{{info.price}}</view>
					</view>
					<view class="saleCount">已售{{info.show_buyer_count}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goodsInfo(v){
				let id = v.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/goods/goods?goodsId='+id
				})
			}
		},
		props:{
			info:{
				type:Object
			}
		}
	}
</script>

<style>
	.flex { display: flex;}
	.flexRow{ flex-flow: row; justify-content: space-between;}
	.goods {flex-flow: column; align-items: center; margin-bottom: 10rpx; border-radius: 20rpx;}
	.goodsInfo { 
		flex-wrap: wrap; flex-direction: column; width: 100%; color: #646464;
		padding: 40rpx 0; 
	}
	
	.vipLogo { color: #fff; align-self: center; margin-left: 10rpx; background-color: #5cb9a4; border-radius: 0 20rpx 20rpx 20rpx; font-size: 10rpx; padding: 5rpx 15rpx;}
	.title{font-weight: bold;}
	.subtitle { margin: 20rpx 0; color: #868c8a;}
	.zn {font-size: 22rpx; color: #5cb9a4;}
	.zero {font-size: 30rpx; color: #5cb9a4; font-weight: bold;}
	.goodsPrice { justify-content: space-between;}
	.subtitle,.goodsPrice{padding: 0 20rpx;}
	.salePrice { margin-left: 30rpx; text-decoration: line-through; font-size: 28rpx; align-self: flex-end;}
	
	.saleCount { margin-right: 50rpx; font-weight: bold;}
	.goods { border:1px solid #eeeeee; box-shadow: 0 0 4rpx 3rpx #eeeeee; border-radius: 10rpx;}
</style>
